﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Liu_Project.Web.Admin.Login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>后台登录</title>
    <script src="../boot.js"></script>
    <style>
        body {
            /*background: radial-gradient(200% 100% at bottom center,#0070aa,#0b2570,#000035,#000);
            background: radial-gradient(220% 105% at top center,#000 10%,#000035 40%,#0b2570 65%,#0070aa);*/
            background: radial-gradient(220% 105% at top center,#3979CA 10%,#5AAFBE 40%,#5AAFBE 65%,#67C8B6);
            background-attachment: fixed;
            overflow: hidden;
            background-color: #0b2570;
        }

        #particles-js {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .login {
            padding: 15px 30px;
            border-radius: 5px;
            background-color: rgba(255,255,255, 0.2);
            width: 260px;
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 999;
            margin: -200px 0 0 -160px;
        }
        /*border:1px solid #aaa;*/
        .layui-form-pane .layui-form-label {
            width: 50px;
            background-color: rgba(255,255,255, 0.5);
            color: #fff;
        }

        .layui-form-pane .layui-input-block {
            margin-left: 50px;
        }

        .login .layui-input {
            font-size: 18px;
            font-weight: 400;
            background-color: rgba(255,255,255, 0.5);
            color: #fff;
            display: inline-block;
        }
        /*.login input[type="password"]{letter-spacing:5px;font-weight:800}*/
        .login input[type="submit"] {
            letter-spacing: 5px;
        }

        .login input[name="txtValidate"] {
            width: 75px;
        }

        .validate {
            float: right;
            border-radius: 3px;
            width: 120px;
            height: 38px;
            overflow: hidden;
        }

        .login .layui-btn {
            width: 100%;
        }

        .login .copyright {
            text-align: center;
            height: 50px;
            line-height: 50px;
            font-size: 12px;
            color: #aaa
        }

        .login .copyright a {
            color: #aaa;
        }

        @media only screen and (min-width:750px) {
            .login {
                width: 350px;
                margin: -200px 0 0 -205px !important
            }

            .login input[name="txtValidate"] {
                width: 165px;
            }
        }

        .lsl-layout-page .layui-form-pane input:hover,
        .lsl-layout-page .layui-form-pane input:focus {
            border-color: #009688 !important;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0, 150, 136, 0.6);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0, 150, 136, 0.6);
        }
    </style>
</head>
<body>
    <div id="particles-js">
        <div class="login lsl-layout-page">
            <form class="layui-form layui-form-pane">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend style="color: #fff;">管理后台登录</legend>
                </fieldset>
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label>
                    <div class="layui-input-block">
                        <input type="text" name="txtUser" placeholder="登录账号" lay-verify="required" lay-vertype="tips" lay-reqtext="登录账号不能为空" autocomplete="off" class="layui-input" maxlength="18" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
                    <div class="layui-input-block">
                        <input type="password" name="txtPwd" placeholder="登录密码" lay-verify="required" lay-vertype="tips" lay-reqtext="登录密码不能为空" autocomplete="off" class="layui-input" maxlength="12" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="layui-icon layui-icon-vercode"></i></label>
                    <div class="layui-input-block">
                        <input type="text" name="txtValidate" placeholder="验证码" lay-verify="required" lay-vertype="tips" lay-reqtext="验证码不能为空" autocomplete="off" class="layui-input" maxlength="4" />
                        <a href="javascript:void(0);" class="validate">
                            <img id="Validate" src="Image.aspx" width="120" height="38" onclick="this.src='Image.aspx?id='+Math.random()" title="点击刷新验证码" />
                        </a>
                    </div>
                </div>
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="SignIn" id="btnSignIn">
                    <span id="load">登录</span>
                    <span id="loading" style="display: none; color: #000000;"><i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop"></i>正在登录...</span>
                </button>
            </form>
        </div>
    </div>
</body>
</html>

<script src="Scripts/static/particles.min.js"></script>
<script src="Scripts/static/particlesJS.js"></script>
<script>
    ; !function () {
        particlesJS_3();

        $ = layui.$;
        var form = layui.form;

        form.on('submit(SignIn)', function (data) {
            $('#load').hide();
            $('#loading').show();
            $('#btnSignIn').addClass('layui-btn-disabled').attr('disabled', true);
            //var index = layer.msg('正在登录...', { icon: 16, shade: 0.5 });
            var index = layer.load(1);
            $.getJSON("Handler/LoginHand.ashx", { "method": "Login", "txtuserNo": data.field.txtUser, "txtuserPwd": data.field.txtPwd, "txtvalidate": data.field.txtValidate }, function (data) {
                layer.close(index);
                if (!data.IsSuccess) {
                    if (data.code == 0) {
                        layer.msg(data.msg, { time: 1000 }, function () {
                            $('#load').show();
                            $('#loading').hide();
                            $('#btnSignIn').removeClass('layui-btn-disabled').attr('disabled', false);
                        });
                    }
                    else {
                        //弹窗
                        layer.open({
                            title: '提示', closeBtn: 0, shade: 0.5, btnAlign: 'c',
                            content: '<div style="padding: 0 50px;text-align: center;">' + data.msg + '</div>',
                            yes: function (index, layero) {
                                layer.close(index); //如果设定了yes回调，需进行手工关闭
                                $('#load').show();
                                $('#loading').hide();
                                $('#btnSignIn').removeClass('layui-btn-disabled').attr('disabled', false);
                            }
                        });
                    }
                    return;
                }
                else {
                    layer.msg('登录成功，正在跳转...', { icon: 6, time: 100 }, function () {
                        location.replace("Pages/Home/Main.aspx");
                    });
                }
            })

            return false;
        });

    }();
</script>
